<template>
  <div id="operating" style="line-height: 50px">
    <el-row class="tac" style="height: 700px">
      <el-col :span="4">
        <el-scrollbar style="height: 700px;width: 100%" :native="false" wrapStyle="" wrapClass="" viewClass="" viewStyle="overflow-x:hidden" :noresize="false" tag="section">
        <el-menu
          default-active="2"
          class="el-menu-vertical-demo leftmenu"
          :unique-opened="true">
          <template v-for="(value,key,index) in Menu">
          <el-submenu :index="String(index)">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>{{value.name}}</span>
            </template>
            <el-menu-item-group v-for="(valuer,keyr,indexr) in value" v-if="indexr > 0">
              <el-menu-item :index="String(index)+String(indexr)" @click="indexLeft = key;indexRight = keyr">{{ valuer.name }}</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          </template>
          <el-menu-item index="4" @click="indexLeft = 3">
            <i class="el-icon-setting"></i>
            <span slot="title">诊断</span>
          </el-menu-item>
          <el-menu-item index="5" @click="indexLeft = 4">
            <i class="el-icon-setting"></i>
            <span slot="title">治疗</span>
          </el-menu-item>
        </el-menu>
        </el-scrollbar>
      </el-col>
      <el-col :span="20">
        <el-row>
          <el-col :span="13">
            <div class="grid-content bg-purple">
              <keep-alive>
                <component v-bind:is="LeftTab"></component>
              </keep-alive>
            </div>
          </el-col>
          <el-col :span="11">
            <div class="grid-content bg-purple-light">
              <keep-alive>
                <component :is="RightTab" :Questions="QuestionShowed" :items="theraphyItems"></component>
              </keep-alive>
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <div>
      <el-button v-if="$store.state.time<2" type="success primary" plain @click="nextSceneButton">切换下一幕<br>第{{$store.state.time+1}}幕，共3幕</el-button>
      <el-button v-else type="success primary" @click="endExperimentButton" plain>结束实验<br>第{{$store.state.time+1}}幕，共3幕</el-button>
    </div>
    <el-dialog
      :title="'第 '+($store.state.time+1)+' 幕'"
      :visible.sync="dialogVisible" width="55%" center destroy-on-close lock-scroll top="20">
      <div style="height: 150px;overflow: hidden;text-align: center" v-html="this.SceneBegin.sceneForeward">

      </div>
      <div style="height: 540px;overflow: hidden">
        <embed :src="SceneBegin.embedSrc" style="width: 960px;height: 540px"></div>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogVisible = false">继 续</el-button>
        </span>

    </el-dialog>
  </div>

</template>

<script>
import data from "../../data";
import DialogueForm from "./Inners/DialogueForm";
import QuestionForm from "./Inners/QuestionForm";
import Therapies from "./Inners/Therapies";
import AnalysisResults from "./Inners/AnalysisResults";
import AnalysisAdd from "./Inners/AnalysisAdd";
export default {
  name: "operating",
  data () {
    return{
      indexLeft: 'inquiry',
      indexRight: 'present',
      dialogVisible: false,
      theraphyItems: data.data().therapies,
      // theraphyItems: data.data().therapies[this.$store.state.time],
      components: [
        DialogueForm,QuestionForm,Therapies
      ]

    }
  },
  methods: {
    //将indexLeft和indexRight重置，防止切换下一幕时候出现undefined问题，但是这里面不灵活，由于inquiry-present一直都是有值的，所以这个时候调用方法是不会报错的
    nextSceneButton(){
      this.$store.commit('nextScene')
      this.dialogVisible = true
      this.indexLeft = 'inquiry'
      this.indexRight = 'present'
    },
    endExperimentButton(){
      this.$router.push('/finish')
    }
  },
  computed: {
    Menu: function(){
      return data.data().questions[this.$store.state.time]
    },
    LeftTab: function (){
      if(this.indexLeft >=3){
        return AnalysisResults
      }else
      return DialogueForm
    },
    RightTab: function (){
      if(this.indexLeft === 4){
        return Therapies
      }else if(this.indexLeft === 3){
        return AnalysisAdd
      }
      else return QuestionForm
    },
    SceneBegin: function(){
      let paramMap = {
        sceneForeward: '',
        embedSrc: ''
      }
      switch (this.$store.state.time){
        case 0: paramMap.sceneForeward = '<h3>我今天又写了一大堆bug，差点把数据全部删掉了</h3>\n' +
                '        <h3>这几天精神状态都不怎么好，bug量是一天比一天多</h3>',
                paramMap.embedSrc = './static/Scene1Opening.mp4'
                return paramMap
        case 1:paramMap.sceneForeward = '<h3>这几天看着也没什么好转啊，主管现在是天天找我的麻烦</h3>\n' +
                '        <h3>要是还这样继续下去，我差不多就该被开除了</h3>',
                paramMap.embedSrc = './static/Scene2Opening.mp4'
                return paramMap
        case 2:paramMap.sceneForeward = '<h3>我也指不上你们这些破医生了，连String和StringBuffer的区别都不知道，还想治病？</h3>\n' +
                '        <h3>（晚上回去，我直接在服务器上执行了“rm -rf /*”，突然病就好了）</h3>',
                paramMap.embedSrc = './static/Scene3Opening.mp4'
                return paramMap
      }
    },
    /**
     * 传参方法，代码表如下所示
     * @returns {[{q: string, a: string, pts: number}]}
     * @constructor
     *
     */
    QuestionShowed: function(){
      switch (this.indexLeft){
        case 'inquiry':
          return data.data().questions[this.$store.state.time].inquiry[this.indexRight].data
        //   switch (this.indexRight){
        //   case 'present':return data.data().questions[this.$store.state.time].inquiry.present.data
        //   case 'history':return data.data().questions[this.$store.state.time].inquiry.history.data
        //   case 'personal':return data.data().questions[this.$store.state.time].inquiry.personal.data
        //   case 'marrige':return data.data().questions[this.$store.state.time].inquiry.marrige.data
        //   case 'family':return data.data().questions[this.$store.state.time].inquiry.family.data
        // }

        case 'mainExam':
          return data.data().questions[this.$store.state.time].mainExam[this.indexRight].data
        //   switch(this.indexRight){
        //   case 'basic':return data.data().questions[this.$store.state.time][indexLeft][indexRight].data
        //   case 'head':return data.data().questions[this.$store.state.time].mainExam.head.data
        //   case 'skin':return data.data().questions[this.$store.state.time].mainExam.skin.data
        //   case 'heart':return data.data().questions[this.$store.state.time].mainExam.heart.data
        //   case 'lymphg':return data.data().questions[this.$store.state.time].mainExam.lymphg.data
        //   case 'lung':return data.data().questions[this.$store.state.time].mainExam.heart.data
        // }
        //   break
        case 'subExam':
          return data.data().questions[this.$store.state.time].subExam[this.indexRight].data
        case 3:
          break
        case 4:
          break

      }
    }
  },
  watch: {

  },
  beforeCreate() {
    const loading = this.$loading({
      lock: true,
      text: 'Initializing',
      spinner: 'el-icon-loading',
      background: 'rgba(0, 0, 0, 0.7)'
    });
    setTimeout(() => {
      loading.close();
      this.dialogVisible = true
    }, 1000);
  }
}
</script>

<style>
.leftmenu{
  height: 700px;
  overflow-x: hidden;
  overflow-y: hidden;
  max-height: 700px;
}
/*.el-scrollbar .el-scrollbar__wrap{*/
/*  overflow-x: hidden;*/
/*}*/

.el-dialog{
  height: 900px;
}
.el-dialog__header{
  height: 50px;
}
.el-dialog__body{
  height: 650px;
  line-height: 30px;
}
.el-dialog__footer{
  height: 100px;
}
</style>
